<template>
  <div class="warpper-box quitList">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise" @enterpriseChange="enterpriseChange"></enterprise-select>
    <a-card style="margin-top: 10px;">
      <div style="display: flex;justify-content: flex-start;align-items: flex-start;">
        <org-select ref="orgSelect" @on-tree="treeCall"></org-select>
        <span style="display: flex;justify-content: flex-start;align-items: center;margin: 6px 10px 0 0;">
          <span style="flex-shrink: 0;margin-right: 8px;color: rgba(0, 0, 0, 0.85);">员工姓名:</span>
          <a-input placeholder="请输入员工姓名" v-model="name"/>
        </span>
        <span style="margin: 6px 10px 0 0;">
          <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
          <a-button type="primary" icon="setting" @click="reset">重置</a-button>
          <a-button type="primary" @click="importHandle">批量导入离职人员</a-button>
          <a-button type="primary" @click="quitExport">导出</a-button>
        </span>
      </div>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="leaveId">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a-popconfirm title="是否放弃该员工的离职办理业务？" ok-text="确认" cancel-text="取消"
            @confirm="removeLeave(record)">
            <a>放弃离职</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
    <!-- 批量导入离职人员 -->
    <a-modal v-model="importVisible" title="导入详情" width="540px" :footer="null">
      <a-alert message="第一步：下载导入信息模板；模版内的表头请勿改动，防止导入时出错。" type="info" />
      <a-button type="primary" @click="downloadOrder" ghost style=";margin: 20px 0;width: 160px;">下载模板</a-button>
      <a-alert message="第二步：批量导入数据；请填写完整的信息。" type="info" />
      <a-button type="primary" @click="importOrder" style="margin: 20px 0;width: 160px;">上传文件</a-button>
      <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel"
        @change="importOrderHandle" style="display: none;" />
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
import OrgSelect from "@/components/human/orgSelect.vue"
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import {
  COLUMNS_QUIT
} from "./form"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  getTablePage,
  getQuitExport,
  staffLeaveCancel,
  downloadEnterpriseStaffLeaveTemplate,
  importEnterpriseStaffLeave
} from "@/api/human/relationQuit"
import { mapGetters,mapActions } from 'vuex'
export default {
  name: 'quitList',
  components: {
    OrgSelect,
    EnterpriseSelect
  },
  data() {
    return {
      table: {
        columns: COLUMNS_QUIT,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      name: "", // 员工姓名
      orgId: "", // 组织id
      enterpriseId: "", // 企业id
      enterpriseData: [], // 客户列表

      importVisible: false,
    }
  },
  filters: {

  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.$refs.orgSelect.add(this.userInfo.relationId);
      this.loadTable(true);
    }
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    
  },
  methods: {
    // 获取企业员工列表
    async loadTable(flag) {
      let params = {};
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.name = this.name;
      params.enterpriseId = this.enterpriseId;
      params.orgId = this.orgId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 批量导入按钮
    importHandle() {
      this.importVisible = true;
    },
    // 下载模板
    downloadOrder() {
      downloadEnterpriseStaffLeaveTemplate().then(res => {
        const blob = new Blob([res]);
        const fileName = '离职人员模板.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 导入表单
    importOrder() {
      this.$refs.fileExcel.click();
    },
    importOrderHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.name.indexOf('.xls') === -1) {
        _this.$message.error("只支持xlsx");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 20)) {
        _this.$message.error('模版大小不能超过 20MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("enterpriseId", _this.enterpriseId);
        formData.append("file", file);
        importEnterpriseStaffLeave(formData).then((res) => {
          if (res.code == 1) {
            _this.importVisible = false;
            _this.$message.success('操作成功');
            _this.loadTable(true);
          }
        })
      }
    },
    // 导出企业离职员工
    quitExport() {
      let params = {};
      params.enterpriseId = this.enterpriseId;
      params.name = this.name;
      params.orgId = this.orgId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      getQuitExport(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业离职员工列表.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 放弃离职
    async removeLeave(row) {
      let params = {
        ids: [row.leaveId]
      };
      const { code } = await staffLeaveCancel(params);
      if (code === '1') {
        this.$message.success('操作成功')
        this.loadTable(true);
      }
    },
    // 组织回调
    treeCall(info) {
      this.orgId = info.key;
    },
    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.$refs.orgSelect.add(value);
      this.loadTable(true);
    },
    reset() {
      this.$refs.orgSelect.reset();
      this.orgId = "";
      this.name = "";
      this.loadTable(true);
    }
  }
}
</script>
<style lang="less">
.quitList {
  width: 100%;
}
</style>